<template>
  <div class="div-main">
    <div class="header">
      <mt-header title="票型说明" class="mt-header">
        <mt-button icon="" slot="right" @click="closepopup()">
          <img src="../../assets/images/tool/cancel.png" style="width:15px;height:15px;" />
        </mt-button>
      </mt-header>
    </div>
    <div class="ydxz">
      <span>预定须知：{{ticketexplaindata.ydxz}}</span>
    </div>
    <div class="tpgz">
      <span>退票规则：{{ticketexplaindata.tktjsz}}</span>
    </div>
    <div class="sysj" v-if="ticketexplaindata.kcsl === '0'">
      <span>暂无售票</span>
    </div>
    <div class="sysj" v-else>
      <com-calendar @popupprice="closecalender" :cpid='this.mmpid' @ticketprice='getticketprice' @buydate='getbuydate'></com-calendar>
    </div>
    <div class="sysm">
      <span>使用说明:</span><br>
      <span>入园方式：{{ticketexplaindata.ryfs}}</span><br>
      <span>入园地址：{{ticketexplaindata.zjrydz}}</span><br>
      <span>预定后时间限制：{{ticketexplaindata.ydhsjxz}}</span><br>
      <span>购买时间：{{ticketexplaindata.gmsj}}</span><br>
      <span>费用说明：{{ticketexplaindata.fybh}}</span><br>
      <span>有效模式：{{ticketexplaindata.syrq}}</span><br>
    </div>
    <div class="bottom">
      <div>
        <span class="span-payonline">在线支付</span>
        <span class="span-symbol">¥</span>
        <span class="span-money">{{ticketexplaindata.xsjg}}</span>
      </div>
      <div v-if="ticketexplaindata.kcsl === '0'" style="background:#8c857a94">无法预定</div>
      <div v-else @click="goFillinorder()">立即预定</div>
      <div style="clear: both;"></div>
    </div>
    <mt-popup v-model="popupprice" position="bottom" style="width: 100%;height:95%;background: rgba(0,0,0,0.4);">
      <com-calendar @popupprice="closecalender"></com-calendar>
    </mt-popup>
  </div>
</template>
<script>
import Calendar from "../../common/vue/Form";
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  components: {
    comCalendar: Calendar
  },
  props: ["ticketexplaindata", "mmpid", "jqid", "jdmc", "mpjg"],
  data() {
    return {
      popupprice: false,
      todayInfo: this.ticketexplaindata.gmsj
    };
  },
  mounted() {},
  methods: {
    closepopup() {
      this.$emit("popupVisiblebook", false);
    },
    getticketprice(msg) {
      let price = msg.replace("￥", "");
      console.log(price);
      this.ticketexplaindata.xsjg = price;
      this.mpjg = price;
    },
    getbuydate(msg) {
      console.log(msg);
      this.todayInfo = msg;
    },
    openpricedate() {
      this.popupprice = true;
    },
    closecalender(msg) {
      this.popupprice = msg;
    },
    goFillinorder() {
      this.$router.push({
        path: "/fillinorder",
        query: {
          mpid: this.mmpid,
          yxms: this.ticketexplaindata.yxqms, //1.无需用户指定日期  2.需要用户指定日期
          mpmc: this.jdmc,
          mpjg: this.mpjg,
          jqId: this.jqid, //景区id
          jdId: this.ticketexplaindata.jdid, //景点id
          todayInfo: this.todayInfo
        }
      });
    },
    getPrice() {
      axios({
        method: "post",
        url: "/api/mpjgrl1/list.htm",
        params: {
          cpid: 3
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          this.pricedata = res.data;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    }
  }
};
</script>
<style scoped>
.div-main {
  width: 100%;
  display: block;
  height: 100%;
  overflow: scroll;
  padding-bottom: 50px;
  position: relative;
}
.header {
  position: fixed;
  width: 100%;
  z-index: 2008;
}
.mt-header {
  background: linear-gradient(rgb(0, 0, 0), rgb(3, 88, 56));
}
.ydxz  {
  padding-top: 50px;
}
.ydxz > span {
  color: black;
  font-size: 15px;
}
.tpgz > span {
  color: black;
  font-size: 15px;
}
.sysj > span {
  color: rgb(224, 35, 241);
  font-size: 20px;
}
.sysm {
  margin-bottom: 50px;
}
.sysm > span {
  color: black;
  font-size: 15px;
}
.bottom {
  position: fixed;
  z-index: 82;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 1rem;
  background: #fff;
}
.span-payonline {
  color: #999;
  font-size: 13px;
}
.span-symbol {
  color: #ff9800;
  font-size: 13px;
}
.span-money {
  color: #ff9800;
  font-size: 20px;
}
.bottom > :nth-child(1) {
  float: left;
  width: 50%;
  height: 100%;
  line-height: 50px;
  text-align: center;
}

.bottom > :nth-child(2) {
  float: left;
  width: 50%;
  height: 100%;
  background: #ff9800;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}
</style>
